<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骑行</title>
</head>
<body class="body">
    <main>
        <!-- 骑行距离 -->
        <div class="running-distance dpflex fdcolumn">
            <p>目前累计骑行距离:</p>
            <p><span>128.56</span>公里</p>
        </div>
        <!-- 地图区域 -->
        <div class="content flex1" style="height: 380px;">
            <!-- 地图容器 -->
            <div id="mapContainer" class="map-container" style="height: 380px;">
            <div class="go">GO</div>
              <!-- 容器中的地图 是动态渲染的 -->
            <div class="bottom-icon">
                <p><i class="iconfont icon-set"></i></p>
                <p><i class="iconfont icon-music"></i></p>
            </div>
        </div>

        </div>
        <div class="running-area dpflex fdcolumn">
            <p>骑行路线</p>
            <p>
                <span>使用骑行路线,邂逅附近的骑行达人</span>
                <i class="iconfont icon-rightreturn"></i>
            </p>
        </div>
    </main>
</body>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=8b592d376c631f7583d09f567ee95494">
    </script>
</html>